<template>
  <div>
    <!-- 上 -->
    <el-card  class="co-middle">
      <el-form :inline="true"  class="demo-form-inline">
        <el-form-item label="订单编号:" label-width="85px" >
               <el-input v-model="pageing.id" placeholder="请输入订单编号:" clearable></el-input>
         </el-form-item >
           <el-form-item label="订单状态:"  label-width="150px">
                <el-select v-model="form.status" placeholder="请选择" value-key="id">
                  <el-option v-for="item in freightmanagement.status" :key="item.id" :label="item.value" :value="item.id"></el-option>
                </el-select>
           </el-form-item>
           <el-form-item label="付费状态:"  label-width="240px">
                <el-select v-model="form.paymentMethod" placeholder="请选择" value-key="id">
                  <el-option v-for="item in freightmanagement.paymentStatus" :key="item.id" :label="item.value" :value="item.id"></el-option>
                </el-select>
           </el-form-item>
         </el-form>
            <!--  -->
              <el-form :inline="true"  class="demo-form-inline">
                 <el-form-item label="发件人姓名:" label-width="px" >
                     <el-input v-model="pageing.senderName" placeholder="请输入发件人姓名:" clearable></el-input>
                </el-form-item >
                 <el-form-item label="发件人电话:" label-width="150px" >
                     <el-input v-model="pageing.senderPhone" placeholder="请输入发件人电话:" clearable></el-input>
                </el-form-item >
                 <el-form-item label="发件人地址:" label-width="150px" >

<el-select v-model="pageing.senderProvinceId" style="margin-right: 10px;width:100px;" clearable @change="provincechange($event)">
<el-option v-for="item in provincelist" :key="item.id" :label="item.name" :value="item.id">
 </el-option>
 </el-select>
 <el-select v-model="pageing.senderCityId" style="margin-right: 10px;width:100px;" clearable @change="citychange($event)">
 <el-option v-for="item in citylist" :key="item.id" :label="item.name" :value="item.id"> </el-option>
 </el-select>
 <el-select v-model="pageing.senderCountyId" style="margin-right: 10px;width:100px;" clearable @change="countrychange($event)">
 <el-option v-for="item in countrylist" :key="item.id" :label="item.name" :value="item.id">
</el-option>
 </el-select>

                </el-form-item >
              </el-form>
              <!--  -->
               <el-form :inline="true"  class="demo-form-inline">
                     <el-form-item label="收件人姓名:" label-width="px" >
                         <el-input v-model="pageing.receiverName" placeholder="请输入收件人姓名:" clearable></el-input>
                     </el-form-item >
                     <el-form-item label="收件人电话:" label-width="150px" >
                         <el-input v-model="pageing.receiverPhone" placeholder="请输入收件人电话:" clearable></el-input>
                     </el-form-item >
                      <el-form-item label="收件人地址:" label-width="150px" >

<el-select v-model="pageing.receiverProvinceId" style="margin-right: 10px;width:100px;" clearable @change="provincechangeb($event)">
<el-option v-for="item in provincelist" :key="item.id" :label="item.name" :value="item.id">
 </el-option>
 </el-select>
 <el-select v-model="pageing.receiverCountyId" style="margin-right: 10px;width:100px;" clearable @change="citychangeb($event)">
 <el-option v-for="item in citylistb" :key="item.id" :label="item.name" :value="item.id"> </el-option>
 </el-select>
 <el-select v-model="pageing.receiverCityId" style="margin-right: 10px;width:100px;" clearable @change="countrychangeb($event)">
 <el-option v-for="item in countrylistb" :key="item.id" :label="item.name" :value="item.id">
</el-option>
 </el-select>

                      <!-- <el-select clearable   @change="change" v-model="pageing.receiverProvince" placeholder="请选择" style="width:100px;margin-right:10px;">
                      <el-option
                        v-for="item in value"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                     </el-select>

                     <el-select clearable  v-model="value" placeholder="请选择" style="width:100px;margin-right:10px;">
                      <el-option
                        v-for="item in value"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                      </el-option>
                     </el-select>
                     <el-select clearable  v-model="value" placeholder="请选择" style="width:100px;">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                     </el-select> -->
                </el-form-item >
               </el-form>
               <el-form>
                <template #default="{row}">
                       <el-button type="danger" @click="search(row)" class="search">搜索</el-button>
                       <el-button @click="reset" class="reset">重置</el-button>
                </template>
               </el-form>
      </el-card>
      <!-- 下半部分 -->
      <el-card style="margin-top:18px;">
         <el-table :data="tableData" style="width: 100%" :header-cell-style="{background:'#f8faff',color:'#818693'}" >
      <el-table-column  type="index" label="序号" width="50"> </el-table-column>
      <el-table-column prop="id" label="订单编号" width="150"> </el-table-column>
      <el-table-column prop="transportOrder.id" label="运单编号" width="150"> </el-table-column>
      <el-table-column prop="createTime" label="下单时间" width="120"> </el-table-column>
      <el-table-column prop="status" label="订单状态" width="120" :formatter="status"></el-table-column>
      <el-table-column prop="senderName" label="发件人姓名" width="120"> </el-table-column>
      <el-table-column prop="senderPhone" label="发件人电话" width="120"> </el-table-column>
      <el-table-column prop="senderProvince.name" label="发件人地址" width="120" :formatter="senderProvince"> </el-table-column>
      <el-table-column prop="receiverName" label="收件人姓名" width="120"> </el-table-column>
      <el-table-column prop="receiverPhone" label="收件人电话" width="120"> </el-table-column>
      <el-table-column prop="receiverProvince.name" label="收件人地址" width="120" :formatter="receiverProvince"> </el-table-column>
      <el-table-column prop="pickupType" label="取件类型" width="120" :formatter="pickupType"> </el-table-column>
      <el-table-column prop="paymentMethod" label="付费类型" width="120" :formatter="paymentMethod"> </el-table-column>
      <el-table-column prop="paymentStatus" label="付费状态" width="120" :formatter="paymentStatus"> </el-table-column>
      <el-table-column  label="操作" fixed="right">
          <template #default="{row}">
        <el-button  type="text" size="small" @click="$router.push(`ordermanagement/orderInfo/${row.id}`)">查看详情</el-button>
      </template>
      </el-table-column>
    </el-table>
      <!-- 分页 -->
       <el-pagination
       class="page"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageing.page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageing.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
      </el-card>
  </div>
</template>

<script>
import freightmanagement from '@/api/constant/freightmanagement'
import { getOrderPage } from '@/api/ordermanagement'
import { getadressapi, getCityApi } from '@/api/institution'
export default {
  name: 'order-management',
  data () {
    return {
      freightmanagement,
      list: [],
      value: [],
      options: [],
      form: {},
      tableData: [],
      pageing: {
        page: 1,
        pageSize: 10,
        id: '',
        paymentStatus: '',
        pickUpType: '',
        receiverCityId: null,
        receiverCountyId: '',
        receiverName: '',
        receiverPhone: '',
        receiverProvinceId: '',
        senderCityId: null,
        senderCountyId: '',
        senderPhone: '',
        senderProvinceId: '',
        status: ''
      },
      total: 0,
      provincelist: [],
      citylist: [],
      countrylist: [],
      citylistb: [],
      countrylistb: []

    }
  },
  created () {
    this.getList()
    // this.sheng()
    // this.shi()
    this.getadress()
  },

  methods: {
    // 获取省市区信息
    async getadress () {
      const res = await getadressapi()
      this.provincelist = res.data
      // console.log(this.provincelist)
    },
    async getcity () {
      const res = await getadressapi({ parentId: this.pageing.senderProvinceId })
      this.citylist = res.data
    },
    async getcountry () {
      const res = await getadressapi({ parentId: this.pageing.senderCityId })
      this.countrylist = res.data
    },
    // 省市区改变后触发
    provincechange (e) {
      this.pageing.senderProvinceId = e
      this.pageing.senderCityId = ''
      this.pageing.senderCountyId = ''
      this.getcity()
    },
    citychange (e) {
      this.pageing.senderCityId = e
      this.pageing.senderCountyId = ''
      this.getcountry()
    },
    countrychange (e) {
      this.pageing.senderCountyId = e
    },
    // 获取省市区信息
    // async getadressb () {
    //   const res = await getadressapi()
    //   this.provincelist = res.data
    //   // console.log(this.provincelist)
    // },
    async getcityb () {
      const res = await getadressapi({ parentId: this.pageing.receiverProvinceId })
      this.citylistb = res.data
    },
    async getcountryb () {
      const res = await getadressapi({ parentId: this.pageing.receiverCountyId })
      console.log(res)
      this.countrylistb = res.data
    },
    // 省市区改变后触发
    provincechangeb (e) {
      this.pageing.receiverProvinceId = e
      this.pageing.receiverCountyId = ''
      this.pageing.receiverCityId = ''
      this.getcityb()
    },
    citychangeb (e) {
      this.pageing.receiverCountyId = e
      this.pageing.receiverCityId = ''
      this.getcountryb()
    },
    countrychangeb (e) {
      this.pageing.receiverCountyId = e
    },
    // async   sheng () {
    //   const re = await getProvinceApi()
    //   console.log(re)
    //   this.value = re.data
    // },
    // async shi () {
    //   const res = await getCityApi('13267')
    //   console.log(res)
    // },
    // async qu () {
    //   const res = await getCityApi('13267')
    //   console.log(res)
    // },
    // 收件人地址
    async change () {
      const res = await getCityApi()
      console.log(res)
      // console.log(1)
    },
    handleSizeChange (newSize) {
      this.pageing.pageSize = newSize
      this.getList()
    },
    handleCurrentChange (newPage) {
      this.pageing.page = newPage
      this.getList()
    },
    async  getList () {
      const res = await getOrderPage({ ...this.pageing, ...this.searchText })
      // console.log(res)
      this.tableData = res.data.items
      this.total = +res.data.counts
      this.form = res.data.items
    },
    // 搜索
    async   search () {
      // this.getList()
      const res = await getOrderPage(this.pageing)
      // console.log(res)
      this.tableData = res.data.items
    },
    // 重置
    reset () {
      this.pageing = {
        id: '',
        status: '',
        paymentMethod: '',
        receiverName: '',
        receiverPhone: '',
        senderName: '',
        senderPhone: ''

      }
      this.getList()
    },
    // 订单状态
    status: function (row, column) {
      // console.log(row)
      if (row.status === 23000) {
        return '代取件'
      } else if (row.status === 23001) {
        return '已取件'
      } else if (row.status === 23002) {
        return '网点自寄'
      } else if (row.status === 23003) {
        return '网点入库'
      } else if (row.status === 23004) {
        return '待装车'
      } else if (row.status === 23005) {
        return '运输中'
      } else if (row.status === 23006) {
        return '网点出库'
      } else if (row.status === 23007) {
        return '待派送'
      } else if (row.status === 23008) {
        return '派送中'
      } else if (row.status === 23009) {
        return '已签收'
      } else if (row.status === 23010) {
        return '拒收'
      } else if (row.status === 23011) {
        return '已取消'
      }
    },
    // 取件类型
    pickupType: function (row) {
      if (row.pickupType === 1) {
        return '网点自寄'
      } else if (row.pickupType === 0) {
        return '上门取件'
      }
    },
    // 付费类型
    paymentMethod: function (row) {
      if (row.paymentMethod === 1) {
        return '预结'
      } else if (row.paymentMethod === 2) {
        return '到付'
      }
    },
    // 付款状态
    paymentStatus: function (row) {
      if (row.paymentStatus === 1) {
        return '未付'
      } else if (row.paymentStatus === 2) {
        return '已付'
      }
    },
    // 发件人地址
    senderProvince: function (row) {
      return row.senderProvince.name + row.senderCity.name + row.senderCounty.name + row.senderAddress
    },
    // 收件人地址
    receiverProvince: function (row) {
      return row.receiverProvince.name + row.receiverCity.name + row.receiverCounty.name + row.receiverAddress
    }
  }

}
</script>

<style lang="scss" scoped>
.search {
    width: 90px;
    padding: 10px 20px!important;
    border-radius: 5px!important;
    font-weight: 400
}
.reset {
  width: 90px;
    margin-left: 12px;
}
.page {
  text-align: center;
}
</style>
